<script setup lang="ts">
import {onMounted, reactive, ref, watch} from 'vue'
import {Refresh, Search} from "@element-plus/icons-vue";
import {getAppointment, getStudentClass, getTeacher} from "@/api/interface/reuqest";
import {pageSize} from "@/views/consult/consultInter";

const formInline = reactive({
    endTime: '',
    startTime: '',
    psyClass: '',
    statusType: '',
    stuName: '',
    stuNum: '',
    teacherName: ""
})

//时间选择器
const value1 = ref('')

//查询请求
let teacherList = ref([])

let pageSizeTeacher = {
    pageSize: 999
}
getTeacher(pageSizeTeacher).then((item) => {
    if(item.code===200){
        teacherList.value = item.rows
    }
})
let classList = ref([])
let list = ref<any>([])
let pageSizeClass = {
    pageSize: 999
}
getAppointment(pageSizeClass).then((item) => {
    // console.log(item)
    if(item.code===200){
        classList.value = item.rows
        // console.log(classList.value)
        let obj
        obj = classList.value.filter((item)=>{
            // console.log(item)
            return item.psyClass !== null
        })
        // console.log(obj)
        let classObj=ref({})
        for(let i=0;i<obj.length;i++){
            // let classname = obj[i].psyClass.name
            classObj.value[obj[i].psyClass.name]=1
        }
        // console.log(classObj.value)
        for(let x in classObj.value){
            list.value.push(x)
        }
        // console.log(list.value)
    }
})
//监听输入框
watch(formInline,()=>{
    // console.log(formInline)
    let pageSize = {
        pageSize: 999,
        endTime: '',
        startTime: '',
        psyClass: formInline.psyClass,
        statusType: formInline.statusType,
        stuName: formInline.stuName,
        stuNum: formInline.stuNum,
        teacherName: formInline.teacherName
    }
},{
    deep:true,
    immediate:true
})

// console.log(teacherList)

onMounted(async ()=>{

    // console.log(teacherList)
})


</script>

<template>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="学生姓名">
            <el-input v-model="formInline.stuName" placeholder="请输入学生姓名" clearable />
        </el-form-item>
        <el-form-item label="班级">
            <el-select
                v-model="formInline.psyClass"
                placeholder="请选择班级"
                clearable
            >
                <el-option v-for="(item,index) in list" :key="index" :label="item" :value="item" />
            </el-select>
        </el-form-item>
        <el-form-item label="学号">
            <el-input v-model="formInline.stuNum" placeholder="请输入学号" clearable />
        </el-form-item>
        <el-form-item label="咨询时间">
            <div class="block">
                <el-date-picker
                    v-model="value1"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    format="YYYY-MM-DD HH:mm:ss"
                    date-format="YYYY/MM/DD ddd"
                    time-format="A hh:mm:ss"
                />
            </div>
        </el-form-item>
        <el-form-item label="赴约状态">
            <el-select
                v-model="formInline.statusType"
                placeholder="全部"
                clearable
            >
                <el-option label="已到" value="1" />
                <el-option label="未到" value="0" />
            </el-select>
        </el-form-item>
        <el-form-item label="咨询师">
            <el-select
                v-model="formInline.teacherName"
                placeholder="全部"
                clearable
            >
                <el-option v-for="item in teacherList" :key="item.id" :label="item.name" :value="item.name" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" :icon="Search">搜索</el-button>
            <el-button :icon="Refresh">重置</el-button>
        </el-form-item>
    </el-form>
<!--    {{teacherList}}-->
</template>

<style scoped lang="scss">
.demo-form-inline .el-input {
    --el-input-width: 200px;
    ::v-deep(.el-input__wrapper){
        width: 200px;
    }
}

.demo-form-inline .el-select {
    --el-select-width: 200px;
    ::v-deep(.el-input__wrapper){
        width: 180px;
    }
}
::v-deep(.el-input__wrapper){
    width: 220px;
}
//时间选择器
.demo-datetime-picker .block{
    padding: 30px 0;
    text-align: center;
}
</style>
